<template>
  <div class="tpl7-silder-goods"
      :style="tplItemData.modulePadding || tplItemData.modulePadding ==0?'padding-top:'+tplItemData.modulePadding+'px;padding-bottom:'+tplItemData.modulePadding+'px;':'padding-top:5px;padding-bottom:5px;'">
    <!-- 折叠轮播 -->
    <div ref="getHeight" class="goods-swiper" v-if="tplItemData.version == 1">
      <!-- TODO 小程序端用swiper -->
      <template>
        <wx-swiper v-if="tplItemData.goodslist.length" class="my-swipe" :circular="true" indicator-color="#c9caca" indicator-active-color="#4c9c9d" :autoplay="autoplay" :indicator-dots="showIndicators">
          <wx-swiper-item class="wx-swiper-item" v-for="(goods,index) in tplItemData.goodslist" :key="index">
            <div class="b-mingoods">
              <a class="goodsimg" @click="openLink(goods.link)">
                <img
                  :src="goods.is_compress == 1 ?`${goods.pic}480x480`:goods.pic"
                  alt
                />
              </a>
              <div class="goods-info">
                <a  @click="openLink(goods.link)"
                    :class="['title','title'+tplItemData.goodstyle,tplItemData.titleLine==1?'multiLine':'']"
                    v-if="tplItemData.showName == 1 ||tplItemData.showName">
                    <span class="seckill" v-if="goods.is_miao && goods.is_miao==1">秒杀</span>
                    <span class="seckill" v-else-if="goods.is_bargin && goods.is_bargin == 1">砍价</span>
                    <span class="seckill" v-else-if="goods.is_cycle && goods.is_cycle == 1 ">周期购</span>
                    <span class="seckill" v-else-if="goods.is_crowd && goods.is_crowd == 1">{{goods.label}}</span>
                    <span class="seckill" v-else-if="goods.is_group_shopping && goods.is_group_shopping == 1">团购</span>
                    <span class="seckill" v-else-if="goods.discount && goods.discount !=10 && goods.rank_price ==null">
                      <!-- {{goods.discount}}折 -->
                      <span v-if="goods.discount_sta==1">限时 ¥{{goods.discount}}</span>
                      <span v-else>{{ goods.discount }}折</span>
                    </span>
                    <span class="seckill" v-else-if="goods.is_auction && goods.is_auction == 1">拍卖</span>
                    <span class="seckill greencol" v-if="goods.is_presale == 1">预售</span>
                    <span class="seckill greencol" v-if="goods.is_time_purchase == 1">限时购</span>
                  <span class="text">{{goods.title}}</span>
                </a>
                <p class="pic_box">
                  <s class="original-price" v-if="goods.original_price">&yen;{{goods.original_price}}</s>
                </p>
                <p class="pic_box">
                  <span :class="['goods-pirce', tplItemData.priceBold && tplItemData.priceBold == 0?'fwt_normal':'']" v-html="scaleGoodsPriceFn(goods.price)"></span>
                </p>

                <!-- 加入购物车按钮 -->
                <a class="addcart">
                  <i class="shop-car" v-if="goods.is_try==1 || goods.is_miao==1 || goods.is_bargin==1 || goods.is_crowd==1 || goods.is_limit_discount==1 || goods.is_group_shopping==1 || goods.is_auction==1 || goods.num<=0" @click="openLink(goods.link)"></i>
                  <i v-else @click="handleOpenSkuDialog(goods)"></i>
                </a>
              </div>
            </div>
          </wx-swiper-item>
        </wx-swiper>
      </template>
    </div>
   
    
  </div>
</template>

<script>
import Vue from 'vue'
import { openPage } from '@/utils/utils'
import { Swipe, SwipeItem } from 'vant'
Vue.use(Swipe)
Vue.use(SwipeItem)
import skuDialog from '@/views/item/components/skuDialog'
import { scaleGoodsPrice } from '@/utils/index'
export default Vue.extend({
  data() {
    return {
      imgadvWxH: '0',
      showIndicators: true,
      autoplay: true,
      skuDialogVisible: false,
      itemId: 0,
      width: 0,
      current: 1
    }
  },
  components: {
    skuDialog
  },
  props: {
    tplItemData: {
      type: Object // 传入参数的类型
    }
  },
  mounted() {
    // console.log(this.$refs.getHeight)
  },
  methods: {
    // TODO 小程序跳转
    openLink(link) {
        openPage(link)
    },
    // TODO 小程序swiper获取图片高度
    onImageLoad(event){
      const imgHeight = event.detail.height
      if(imgHeight > parseFloat(this.imgadvWxH)){
        this.imgadvWxH = imgHeight+'px'
      }
    },
    change(index) {
      this.current = index
    },
    /**
       * 商品价格 整数放大
       */
    scaleGoodsPriceFn(price, className) {
      return scaleGoodsPrice(price, className)
    },
    // 跳转商品详情页
    linkToDetail(link) {
      window.location.href = link
    },
    /**
       * 打开SKU弹窗
       */
    handleOpenSkuDialog(data) {
      const buy_need_fans = this.$store.getters.wxConfig.buy_need_fans
      const that = this
      if (buy_need_fans == 1) {
        that.$isFans(() => {
          this.$Error('请先等待商家绑定公众号')
          return false
        }, () => {
          that.$refs.shopCode.dialogVisible = true
          return false
        }, () => {
          // 打开sku弹窗
          that.skuDialogVisible = true
          that.itemId = Number(data.item_id)
        })
      } else {
        // 打开sku弹窗
        that.skuDialogVisible = true
        that.itemId = Number(data.item_id)
      }
      // this.skuDialogVisible = true
      // this.itemId = Number(data.item_id)
    }
  }
})
</script>

<style lang="scss">
@import "src/styles/mixin";
.miniprogram-root {
  .tpl7-silder-goods {
    .goods-swiper {
      width: 100%;
      .my-swipe {
        height: 500px;
        padding-bottom: 30px;
        swiper-item {
          width: 280px!important;
          padding: 0 20px;
        }
      }
      .b-mingoods {
        .goodsimg {
          img {
            width: 280px;
            height: 280px;
          }
        }
      }
    }
  }
}
.tpl7-silder-goods{
  overflow: hidden;
  .goods-swiper{
    width: 280px;
    margin: 0 auto;
    .my-swipe{
      overflow: initial;
      padding-bottom: 70px;
      .van-swipe-item{
          transform: scale(.8);
        &.van-swipe-item-active{
          transform: scale(1);
        }
      }
      .van-swipe__indicators{
        .van-swipe__indicator{
          width: 16px;
          height: 16px;
          background: #c9caca;
          &.van-swipe__indicator--active{
            background: #4c9c9d;
          }
        }
      }
    }
    .b-mingoods{
      width: 100%;
      background: #fff;
      .goodsimg{
        display: block;
        position: relative;
        padding-top: 100%;
        overflow: hidden;
        img{
          position: absolute;
          top: 0;
          width: 100%;
        }
      }// 商品信息
      .goods-info{
        position: relative;
        padding: 5px;
        .title{
          .seckill{
            display: inline-block;
            @include gradient(left,rgba(255,42,64,1),rgba(254,60,112,1));
            padding: 0 15px;
            margin-right: 6px 3px;
            font-size: 20px;
            border-radius: 17px;
            line-height: 34px;
            height: 34px;
            color: #fff;
          }
          .text{
            @include lineClamp(26px,38px,1);
          }
          &.multiLine{
            .text{
              @include lineClamp(26px,38px,2);
              height: 76px;
            }
          }
        }
        .pic_box{
          overflow: hidden;
          line-height: 50px;
          .original-price,.selled-num{
            color: #999999;
            font-size: 22px;
          }
        }
        .addcart{
          position: absolute;
          bottom: 15px;
          right: 20px;
          width: 50px;
          height: 50px;
          background: url(https://img.wifenxiao.com/h5-wfx/images/item/list/cart.png) center/cover no-repeat;
          i{
            display: block;
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>